<template>
    <div class="goods-list">
          <yx-header>
            <template #left>
               <van-icon name="arrow-left" @click="$router.go(-1)"/>
            </template>
            <template #center>
               人气推荐
            </template>
        </yx-header>
        <!-- 商品列表 -->
       <div class="goods">
            <goods-item v-for="(item,index) in goodsList" :key="index" :item="item" @click="$router.push(`/detail/${item.id}`)"></goods-item>
        </div>
    </div>
</template>
<script>
import yxHeader from '@/components/yxHeader'
import {getGoodsList} from '@/utils/home.js'
import {reactive,toRefs} from 'vue'
import goodsItem from '@/components/goodsItem'
import {useRouter} from 'vue-router'
export default {
    setup(props) {
        const data = reactive({
            goodsList:[]
        })
        const router = useRouter()
        getGoodsList().then(res=>{
            data.goodsList = res.data
        })
       
        return {...toRefs(data)}
    },
    components:{
        yxHeader,
        goodsItem
    }
}
</script>
<style lang="scss" scoped>
.goods{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 10px;
     background: #fff;
}
</style>
